<template>
  <div class="paper-preview-container">
    <div class="paper-info">
      <div class="info-row">
        <span class="info-label">期刊名称:</span>
        <span class="info-value">{{ paper.journal || '--' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">卷号/期号:</span>
        <span class="info-value">
          {{ paper.volume || '--' }} / {{ paper.issue || '--' }}
        </span>
      </div>
      <div class="info-row">
        <span class="info-label">页码范围:</span>
        <span class="info-value">{{ paper.pageRange || '--' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">检索级别:</span>
        <span class="info-value">
          <el-tag :type="getIndexLevelType(paper.indexLevel)" size="small">
            {{ paper.indexLevel || '--' }}
          </el-tag>
        </span>
      </div>
      <div class="info-row">
        <span class="info-label">影响因子:</span>
        <span class="info-value">{{ paper.impactFactor || '--' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">发表日期:</span>
        <span class="info-value">{{ formatDate(paper.publishDate) || '--' }}</span>
      </div>
    </div>

    <div class="paper-actions">
      <el-button
          size="small"
          type="primary"
          @click="openPaperLink"
          :disabled="!paper.paperLink"
      >
        查看论文
      </el-button>
    </div>
  </div>
</template>

<script>
import { defineProps } from 'vue'
import dayjs from 'dayjs'

export default {
  props: {
    paper: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 获取检索级别标签类型
    const getIndexLevelType = (level) => {
      switch (level) {
        case 'SCI': return 'danger'
        case 'SSCI': return 'warning'
        case 'EI': return 'success'
        case '核心': return 'primary'
        default: return 'info'
      }
    }

    // 日期格式化
    const formatDate = (date) => {
      return date ? dayjs(date).format('YYYY-MM-DD') : ''
    }

    // 打开论文链接
    const openPaperLink = () => {
      if (props.paper.paperLink) {
        window.open(props.paper.paperLink, '_blank')
      } else {
        ElMessage.warning('论文链接不存在')
      }
    }

    return {
      getIndexLevelType,
      formatDate,
      openPaperLink
    }
  }
}
</script>

<style scoped>
.paper-preview-container {
  padding: 10px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  line-height: 1.5;
}

.info-label {
  color: #909399;
  width: 80px;
  flex-shrink: 0;
}

.info-value {
  color: #606266;
  word-break: break-word;
}

.paper-actions {
  margin-top: 15px;
  text-align: right;
}
</style>